<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="four">
        <div class="four-content">
            <div class="four3">
                <div class="four3-left">

                    <div class="four3-right" id="all">
                        <h2 style="position: absolute;left: 350px;top: 40px;">{{txt_f}} </h2>

                        <four1 :arr1="arr" :a="a" v-for="(a,i) in arr" @txt="show_f"></four1>

                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="../../vue.js"></script>
<template id="content">
    <div class="four3-right1" @click="txt">
        <img :src="(`${a.img}`)" alt="">
        <p>{{a.name}} </p>
        <p>{{a.tip}}</p>
        <p>{{a.jg}}元起</p>
    </div>
</template>
<script>
    var all = new Vue({
        el: "#all",
        data() {
            return {
                img: "./56e3379b5422cb06e5c8a0c546445606.png",
                a: 'null',
                txt_f: null,
                arr: [{
                        img: `./56e3379b5422cb06e5c8a0c546445606.png`,
                        name: "Redmi 9A",
                        tip: "折叠大屏|自研芯片",
                        jg: "599"
                    },
                    {
                        img: "./56e3379b5422cb06e5c8a0c546445606.png",
                        name: "Redmi 8A",
                        tip: "折叠大屏|自研芯片",
                        jg: "699"
                    },
                    {
                        img: "./56e3379b5422cb06e5c8a0c546445606.png",
                        name: "Redmi 7A",
                        tip: "折叠大屏|自研芯片",
                        jg: "799"
                    },
                    {
                        img: "./56e3379b5422cb06e5c8a0c546445606.png",
                        name: "Redmi 6A",
                        tip: "折叠大屏|自研芯片",
                        jg: "899"
                    },
                    {
                        img: "./56e3379b5422cb06e5c8a0c546445606.png",
                        name: "Redmi 5A",
                        tip: "折叠大屏|自研芯片",
                        jg: "999"
                    },
                    {
                        img: "./56e3379b5422cb06e5c8a0c546445606.png",
                        name: "Redmi 4A",
                        tip: "折叠大屏|自研芯片",
                        jg: "1099"
                    },
                ]

            }
        },
        methods: {
            show_f(con) {
                this.txt_f = con
            }

        },
        components: {
            'four1': {
                template: "#content",
                props: ['arr1'],
                props: ['i'],
                props: ['a'],
                data() {
                    return {
                        txt_name: this.a.name
                    }

                },
                methods: {
                    txt() {
                        console.log(this.txt_name);
                        this.$emit('txt', this.txt_name)
                    }

                },
            }
        }
    })
</script>

</html>